<style lang="less" scoped>
  .cart_wrap {}
  .cart_items {
    padding-bottom: 2.58rem; background-color: #f3f3f3;
    .cart_item {
      position: relative; width:100%; padding: 0.2rem 0.3rem; background-color: #fff; overflow: hidden;
      .check {
        float: left; width: 0.44rem; height: 1rem;
        i { position: absolute; width: 0.4rem; height: 0.4rem; top: 0; bottom: 0; margin: auto 0; background: url("/static/images/icon_yq_f.png") no-repeat center; background-size: 0.33rem;}
        i.active {background: url("/static/images/icon_yq_t.png") no-repeat center; background-size: 0.33rem;}
      }
      .img_wrap {float: left; width: 1.52rem; height: 1.52rem;}
      .img_wrap img {width: 100%; height: 100%;}
      .con {
        float: right; width: 4.6rem; overflow: hidden;
        .top {float: left; width: 100%; height: 0.76rem; overflow: hidden; font-size: 0.24rem; color: #666; line-height: 0.36rem;}
        .mid {visibility: hidden; display:none; float: left; width: 100%; height: 0.32rem; text-align: right; color: #d3ac6f; font-size: 0.28rem; }
        .left {float: left; color: #d3ac6f; font-size: 0.28rem; margin-top: 0.2rem;}
        .right {float: right; font-size: 0.28rem;}
        .right span {display: block; color: #999; font-size: 0.28rem; margin-top: 0.2rem;}
      }
    }
  }
  .cart_bottom {
    position: fixed; width: 100%; bottom: 1.08rem; background-color: #fff; overflow: hidden; z-index: 9; box-sizing: border-box; border-top: 0.5px solid #c9c9c9;
    .check {
      float: left; width: 1.4rem; height: 1.2rem; line-height: 1.2rem; font-size: 0.3rem; color: #333; text-align: right;
      i { position: absolute; width: 0.4rem; height: 0.4rem; top: 0; left: 0.3rem; bottom: 0; margin: auto 0; background: url("/static/images/icon_yq_f.png") no-repeat center; background-size: 0.33rem;}
      i.active {background: url("/static/images/icon_yq_t.png") no-repeat center; background-size: 0.33rem;}
    }
    .btns {float: right; width: 2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; font-size: 0.3rem; background-color: #d3ac6f; color: #fff;}
    .value {float: right; margin-right: 0.2rem; height: 1.2rem; line-height: 1.2rem; font-size: 0.3rem; color: #d3ac6f;}
  }

</style>

<template>
  <div class="cart_wrap">
    <NoMore v-if="false">当前购物车还没有商品</NoMore>
    <template v-else>
      <ul class="cart_items">
          <LeftSlider style="margin-bottom: 0.1rem;" v-for="(item,index) in collectionList":key="index" :index="index" @delItem="delItem">
            <li class="cart_item">
              <div class="check"><i :class="'active'"></i></div>
              <div class="img_wrap"><img src="/static/images/list.png"></div>
              <div class="con">
                <p class="top">钻石分类产品名分类产品名分类产品名分类产品名分类产品名</p>
                <span class="mid">￥9999</span>
                <span class="left" style="ver">￥9999</span>
                <div class="right">
                    <yd-spinner max="99" v-model="spinner3"></yd-spinner>
                    <!-- <span>× 5</span> -->
                </div>
              </div>
            </li>
          </LeftSlider>
      </ul>
      <div class="cart_bottom">
        <div class="check"><i :class="'active'"></i>全选</div>
        <div class="btns"><router-link to="/Order">结算</router-link></div>
        <div class="value">合计：{{640.54}}</div>
      </div>
    </template>
  </div>
  
</template>
<script>
import LeftSlider from '../Common/LeftSlider.vue';
import NoMore from '../Common/NoMore.vue';

export default {
  components: { LeftSlider, NoMore },
  data() {
    return {
      radio: 0,
      spinner3: 0,
      collectionList: [1, 2, 3,4,5,6,7]
    }
  },
  created() {
    // this.getCollectionList();
  },
  methods: {
    fn() {
      this.radio5 = !this.radio5
    }
  },
  computed: {
    
  },
  methods: {
    // 删除
    delItem: function (index) {
      console.log(1)
      // api.commonApi('后台接口，请求数据')//此处api是封装的axios，详情看文章：vue2+vuex+axios即可
      //         .then(res => {
      //     console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
      // this.collectionList.splice(index, 1);
      // });
    }
  },
  mounted() {

  }
}
</script>
